<template>
  <div class="wrapper">
      <picker
       mode='selector'
       :range='cityList'
       @change='changeCity'
       range-key='label'>
          <span >{{city.label||'北京'}}</span>
      </picker>
       
      <map 
       :show-location='true'
       @labeltap='labeltap'
      :include-points='markers'
      :markers='markers'>

      </map>
  </div>
</template>

<script>
import {getCity,getHouseMap } from '../../services/index'
export default {
    data() {
        return {
            cityList:[],
            city:{},
            areaId:'',
            areaList:[],
        }
    },
    watch:{
        areaId:{
            handler:async function (value){
                if(value){
                    let result=await getHouseMap(value);
                    console.log(result,'fff');
                    if(result.status===200&&result.body.length){
                        this.areaList=result.body
                    }
                }
                
            },
            deep:true,//深度监听
            immediate:true,//无论改不改变都触发  立即触发
        }
    },
    computed:{
        //标记点
        markers(){
            return this.areaList.map((item,index)=>{
                return{
                    ...item.coord,
                    id:index,
                    label:{
                        value:item.value,
                        content:`${item.label}有${item.count}房子`,
                        fontSize:15,
                        color:'#ffd700',
                        textAlign:'center',
                        padding:6,
                        bgColor:'#00000099',
                        borderRadius:5
                    },
                    width:0,
                    height:0
                }
            })
        },

    },
    async onShow(){
        let result=await getCity()
        if(result.status==200){
            this.cityList=result.body
            this.city=this.cityList[0]
            this.areaId=this.city.value
        }
    },
    methods: {
        changeCity(e){
            // console.log('arguments',arguments);
            this.city=this.cityList[e.target.value]
            this.areaId=this.cityList[e.target.value].value
        },
        labeltap({detail:{markerId}}){
            console.log('arguments',arguments);
            this.areaId=this.areaList[markerId].value
        }
    },
}
</script>

<style lang="scss" scoped>
    .wrapper{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
    }
    picker{
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
    map{
        width: 100%;
        flex: 1;
    }
</style>